<div class="blazorise-codeblock">
<div class="html"><pre>
<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">LineChart</span> <span class="htmlAttributeName"><span class="atSign">&#64;</span>ref</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">lineChart</span><span class="quot">&quot;</span> <span class="htmlAttributeName">TItem</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">int</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Options</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>lineChartOptions</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">ChartAnnotation</span> <span class="htmlAttributeName">TItem</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">int</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Options</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>lineAnnotationOptions</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">LineChart</span><span class="htmlTagDelimiter">&gt;</span>
</pre></div>
<div class="csharp"><pre>
<span class="atSign">&#64;</span>code {
    <span class="keyword">private</span> LineChart&lt;<span class="keyword">int</span>&gt; lineChart;

    LineChartOptions lineChartOptions = <span class="keyword">new</span>()
    {
        AspectRatio = 5d / 3d,
        Layout = <span class="keyword">new</span>()
        {
            Padding = <span class="keyword">new</span>()
            {
                Top = <span class="number">32</span>,
                Right = <span class="number">16</span>,
                Bottom = <span class="number">16</span>,
                Left = <span class="number">8</span>
            }
        },
        Elements = <span class="keyword">new</span>()
        {
            Line = <span class="keyword">new</span>()
            {
                Fill = <span class="keyword">false</span>,
                Tension = <span class="number">0</span>.<span class="number">4</span>,
            }
        },
        Scales = <span class="keyword">new</span>()
        {
            Y = <span class="keyword">new</span>()
            {
                Stacked = <span class="keyword">true</span>,
            }
        },
        Plugins = <span class="keyword">new</span>()
        {
            Legend = <span class="keyword">new</span>()
            {
                Display = <span class="keyword">false</span>
            }
        }
    };

    Dictionary&lt;<span class="keyword">string</span>, ChartAnnotationOptions&gt; lineAnnotationOptions = <span class="keyword">new</span>()
    {
        { <span class="string">&quot;line1&quot;</span>, <span class="keyword">new</span> LineChartAnnotationOptions
            {
                Type = <span class="string">&quot;line&quot;</span>,
                Label = <span class="keyword">new</span>()
                {
                    BackgroundColor = <span class="string">&quot;#ff0000&quot;</span>,
                    Content = <span class="string">&quot;Test Label&quot;</span>,
                    Display = <span class="keyword">true</span>
                },
                YMin = <span class="number">60</span>,
                YMax = <span class="number">60</span>,
                BorderColor = <span class="keyword">new</span>( <span class="number">255</span>, <span class="number">99</span>, <span class="number">132</span> ),
                BorderWidth = <span class="number">5</span>,
            }
        }
    };

    <span class="keyword">private</span> <span class="keyword">static</span> <span class="keyword">string</span>[] Labels = <span class="keyword">new</span> <span class="keyword">string</span>[] { <span class="string">&quot;1&quot;</span>, <span class="string">&quot;2&quot;</span>, <span class="string">&quot;3&quot;</span>, <span class="string">&quot;4&quot;</span>, <span class="string">&quot;5&quot;</span>, <span class="string">&quot;6&quot;</span> };
    <span class="keyword">private</span> <span class="keyword">static</span> <span class="keyword">string</span>[] BackgroundColors = <span class="keyword">new</span> <span class="keyword">string</span>[] { <span class="string">&quot;#4bc0c0&quot;</span>, <span class="string">&quot;#36a2eb&quot;</span>, <span class="string">&quot;#ff3d88&quot;</span> };
    <span class="keyword">private</span> <span class="keyword">static</span> <span class="keyword">string</span>[] BorderColors = <span class="keyword">new</span> <span class="keyword">string</span>[] { <span class="string">&quot;#4bc0c0&quot;</span>, <span class="string">&quot;#36a2eb&quot;</span>, <span class="string">&quot;#ff3d88&quot;</span> };
    <span class="keyword">private</span> Random random = <span class="keyword">new</span>( DateTime.Now.Millisecond );

    <span class="keyword">protected</span> <span class="keyword">override</span> <span class="keyword">async</span> Task OnAfterRenderAsync( <span class="keyword">bool</span> firstRender )
    {
        <span class="keyword">if</span> ( firstRender )
        {
            <span class="keyword">await</span> lineChart.Clear();
            <span class="keyword">await</span> lineChart.AddLabelsDatasetsAndUpdate( Labels, GetLineChartDataset( <span class="number">0</span> ), GetLineChartDataset( <span class="number">1</span> ), GetLineChartDataset( <span class="number">2</span> ) );
        }
    }

    <span class="keyword">private</span> LineChartDataset&lt;<span class="keyword">int</span>&gt; GetLineChartDataset( <span class="keyword">int</span> colorIndex )
    {
        <span class="keyword">return</span> <span class="keyword">new</span>()
        {
            Label = <span class="string">&quot;# of randoms&quot;</span>,
            Data = RandomizeData( <span class="number">2</span>, <span class="number">110</span> ),
            BackgroundColor = BackgroundColors[colorIndex],
            BorderColor = BorderColors[colorIndex],
        };
    }

    List&lt;<span class="keyword">int</span>&gt; RandomizeData( <span class="keyword">int</span> min, <span class="keyword">int</span> max )
    {
        <span class="keyword">return</span> Enumerable.Range( <span class="number">0</span>, Labels.Count() ).Select( x =&gt; random.Next( min, max ) ).ToList();
    }
}
</pre></div>
</div>
